﻿@model  List<FTBS.Models.Entities.Theater>

<html>
<body onload="loadAllShowTimeOfFirstTheater(@Model[0].TheaterId)">
    <div class="grid">
        @foreach (var theater in Model)
        {
            <div class="row">
                <div class="span5">
                    <div class="listview">
                        <a href="#" class="list" id="theaterItem @theater.TheaterId"  onclick="ChangeTypeTheater(@theater.TheaterId)">
                            <div class="list-content" onclick="loadShowTimeByTheaterId(@theater.TheaterId)">
                                <img src="~/Image/Theater/@theater.ImageURL" class="icon" />
                                <div class="data">
                                    <span class="list-title">@theater.TheaterName</span>
                                    <span class="list-subtitle">@theater.Address</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        }
    </div>
</body>
</html>

<script>
    function loadAllShowTimeOfFirstTheater(idOfTheater) {
        $.ajax({
            url: "/Schedule/ShowTimeOfTheater",
            type: "GET",
            data: { theaterId: idOfTheater },
            success: function (data) {
                $('#listShowTime').html(data);
            },
            error: function (data) {
                alert("fail");
            }

        });
    }

    function ChangeTypeTheater(theaterId) {
        var idTag = "theaterItem" + " " + theaterId;
        document.getElementById(theaterId)
        var classValue = document.getElementById(idTag).getAttribute("class");

        if (classValue == "list selected") {
            document.getElementById(idTag).setAttribute("class", "list");
        }
        else {
            $("a[id^='theaterItem']").attr('class', 'list');
            document.getElementById(idTag).setAttribute("class", "list selected");
        }

    }
</script>




